<template>
   <div class="system-quill-editor">
    <quill-editor
      class="ql-editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  // [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link"] // 链接、图片
];
 
export default {
  props: {
    pcontent: ""
  },
  components: { quillEditor },
  data() {
    return {
      content: "",
      // 富文本框参数设置
      editorOption: {
        placeholder: "",
        modules: {
          ImageExtend: {
            loading: true,
            name: "file",
            // action:
            //   "http://baby.ci123.c******.php?method=upload&type=image",
            response: res => {
              console.log(res);
              return res.data.url;
            }
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      }
    };
  },
  created: function() {
    var that = this;
    that.content = that.pcontent;
  },
  // watch: {
  //   pcontent(newValue, oldValue) {
  //     var that = this;
  //     that.content = newValue;
  //   }
  // },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
        console.log("content:",this.content)
      //内容改变事件
      this.$emit("inputfuns", this.content);
    }
  }
};
</script>
<style lang="less" scoped>
.system-quill-editor /deep/ .ql-editor {
    position: relative;
    padding: 0;
    line-height: 0;
    .ql-toolbar {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        border-radius: 4px 4px 0 0;
        border-color: #dcdee2;
        background-color: #fff;
    }
    .ql-formats:last-of-type {
        margin-right: 0;
    }
    .ql-container {
        min-height: 200px;
        max-height: 600px;
        border-radius: 0 0 4px 4px;
        border-color: #dcdee2;
        .ql-editor {
            padding: 12px 8px;
            font-size: 14px;
            line-height: 1.5;
            &.ql-blank::before {
                color: #c5c8ce;
                font-style: normal;
                font-size: 14px;
            }
        }
    }
}
</style>
